<app-header>
  <bit-search
    [formControl]="searchControl"
    [placeholder]="'searchMembers' | i18n"
    class="tw-grow"
    *ngIf="!(isLoading$ | async)"
  ></bit-search>

  <button
    type="button"
    bitButton
    buttonType="primary"
    [bitAction]="exportReportAction"
    *ngIf="!(isLoading$ | async)"
  >
    <span>{{ "export" | i18n }}</span>
    <i class="bwi bwi-fw bwi-sign-in" aria-hidden="true"></i>
  </button>
</app-header>

<div class="tw-max-w-4xl">
  <p bitTypography="body1">
    {{ "memberAccessReportPageDesc" | i18n }}
  </p>
</div>

<ng-container *ngIf="isLoading$ | async">
  <div class="tw-flex-col tw-flex tw-justify-center tw-items-center tw-gap-5 tw-mt-4">
    <i
      class="bwi bwi-2x bwi-spinner bwi-spin tw-text-primary-600"
      title="{{ 'loading' | i18n }}"
      aria-hidden="true"
    ></i>
    <h2 bitTypography="h1">{{ "loading" | i18n }}</h2>
  </div>
</ng-container>
<bit-table-scroll *ngIf="!(isLoading$ | async)" [dataSource]="dataSource" [rowSize]="53">
  <ng-container header>
    <th bitCell bitSortable="email" default>{{ "members" | i18n }}</th>
    <th bitCell bitSortable="groupsCount" class="tw-w-[278px]">{{ "groups" | i18n }}</th>
    <th bitCell bitSortable="collectionsCount" class="tw-w-[278px]">{{ "collections" | i18n }}</th>
    <th bitCell bitSortable="itemsCount" class="tw-w-[278px]">{{ "items" | i18n }}</th>
  </ng-container>
  <ng-template bitRowDef let-row>
    <td bitCell>
      <div class="tw-flex tw-items-center">
        <bit-avatar size="small" [text]="row.name" class="tw-mr-3"></bit-avatar>
        <div class="tw-flex tw-flex-col">
          <button type="button" bitLink (click)="edit(row)">
            {{ row.name }}
          </button>

          <div class="tw-text-sm tw-mt-1 tw-text-muted">
            {{ row.email }}
          </div>
        </div>
      </div>
    </td>
    <td bitCell class="tw-text-muted tw-w-[278px]">{{ row.groupsCount }}</td>
    <td bitCell class="tw-text-muted tw-w-[278px]">{{ row.collectionsCount }}</td>
    <td bitCell class="tw-text-muted tw-w-[278px]">{{ row.itemsCount }}</td>
  </ng-template>
</bit-table-scroll>
